<template>
  <div>
    <hello-world></hello-world>
    <h1>{{ count }}</h1>
    <h1>{{ douCount }}</h1>
    <button @click="changedata">mutations 改变数据</button>
    <button @click="actData">actions 改变数据</button>
  </div>
</template>
<script lang="ts">
import { useStore } from 'vuex'

import { defineComponent, computed, ref } from 'vue'
import HelloWorld from '../components/HelloWorld.vue'
export default defineComponent({
  components: {
    HelloWorld,
  },
  setup(props) {
    let store = useStore()
    // getters
    let douCount = computed(() => {
      return store.getters.douCount
    })
    // state
    let count = computed(() => {
      return store.state.count
    })
    // 触发mutations
    let changedata = () => {
      store.commit('changeCount', 1)
    }
    // 触发actions
    let actData = () => {
      store.dispatch('countActions', 2)
    }
    return {
      count,
      douCount,
      changedata,
      actData,
    }
  },
})
</script>
<style lang="less"></style>
